Die JSFiddle davon.
Ich möchte einen ordentlichen Stapel von SVG-Rechtecken, wenn die Startposition und der vertikale Rand definiert sind, und Daten aus einem Array verwenden.
In der JSfiddle wird der Ausgabecontainer manuell codiert, um das gewünschte Ergebnis zu demonstrieren. Wie bekomme ich es mit d3? Ich habe folgendes versucht.
var input = [{"text": "inleaf1", "col": "red"}, {"text": "inleaf2", "col": "blue"}, {"text": "inleaf3", " col ":" green "}];
var elementwidth = 120;
var elementheight = 50;
var inputstartx = 20;
var inputstarty = 20; /////////// y sollte sich für jedes Rechteck ändern
var vertikaler Rand = 20;
var canvas = d3.select (". canvas");
var inputcontainer = d3.select ("# input-container");
var inputleaf = Eingabecontainer
.data (Eingaben)
.enter (). append ("rect")
.attr ("Klasse", "Eingabeblatt")
.attr ("Breite", Elementbreite)
.attr ("Höhe", Elementhöhe)
.attr ("x", inputstartx)
.attr ("y", Funktion (d, i) {
return Number (inputstarty) + (Elementhöhe * i) + vertikaler Rand;
})
.attr ("Strich", Funktion (d) {
return d.col;
});
2021-01-08 08:13:33
Sie vermasseln dies nur -> selectAll ()
var input = [{"text": "inleaf1", "col": "red"}, {"text": "inleaf2", "col": "blue"}, {"text": "inleaf3", " col ":" green "}];
var elementwidth = 120;
var elementheight = 50;
var inputstartx = 20;
var inputstarty = 20; /////////// y sollte sich für jedes Rechteck ändern
var vertikaler Rand = 20;
var canvas = d3.select (". canvas");
var inputcontainer = d3.select ("# input-container");
var inputleaf = inputcontainer.selectAll ('. rect')
.data (Eingaben)
.enter (). append ("rect")
.attr ("Klasse", "Eingabeblatt")
.attr ("füllen", "keine")
.attr ("Breite", Elementbreite)
.attr ("Höhe", Elementhöhe)
.attr ("x", inputstartx)
.attr ("y", Funktion (d, i) {
Elementhöhe zurückgeben * (2 * i + 1);
})
.attr ("Strich", Funktion (d) {
return d.col;
});